<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>html5消息提示框 | Other Box Spinner</title>
		<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,700" rel="stylesheet" type="text/css">
		
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/ns-default.css" />
		<link rel="stylesheet" type="text/css" href="css/ns-style-other.css" />
		<script src="js/modernizr.custom.js"></script>
		<!--[if IE]>
  		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body class="color-9">
		<div class="container">
			
			<header class="jq22-header">
				<h1>html5消息提示框 <span>精美实用的消息提示框</span></h1>
			</header>
			<div class="main clearfix">
				<div class="column">
					<p class="small">点击按钮弹出提示框:</p>
					<button id="notification-trigger" class="progress-button">
						<span class="content">显示提示框</span>
						<span class="progress"></span>
					</button>
				</div>
				<div class="column">
					<nav class="jq22-demos">
						<h3>Growl-like</h3>
						<div>
							<a href="index.html">Scale</a>
							<a href="growl-jelly.html">Jelly</a>
							<a href="growl-slide.html">Slide in</a>
							<a href="growl-genie.html">Genie</a>
						</div>
						<h3>Attached</h3>
						<div>
							<a href="attached-flip.html">Flip</a>
							<a href="attached-bouncyflip.html">Bouncy Flip</a>
						</div>
						<h3>Top Bar</h3>
						<div>
							<a href="bar-slidetop.html">Slide On Top</a>
							<a href="bar-exploader.html">Expanding Loader</a>
						</div>
						<h3>Other</h3>
						<div>
							<a href="other-cornerexpand.html">Corner Expand</a>
							<a href="other-loadingcircle.html">Loading Circle</a>
							<a class="current-demo" href="other-boxspinner.html">Box Spinner</a>
							<a href="other-thumbslider.html">Thumb Slider</a>
						</div>
					</nav>
				</div>
			</div>
		</div><!-- /container -->
		<script src="js/classie.js"></script>
		<script src="js/notificationFx.js"></script>
		<script>
			(function() {
				var bttn = document.getElementById( 'notification-trigger' );

				// make sure..
				bttn.disabled = false;

				bttn.addEventListener( 'click', function() {
					// create the notification
					var notification = new NotificationFx({
						message : '<p>I am using a beautiful spinner from  SpinKit </p>',
						layout : 'other',
						effect : 'boxspinner',
						ttl : 9000,
						type : 'notice', // notice, warning or error
						onClose : function() {
							bttn.disabled = false;
						}
					});

					// show the notification
					notification.show();

					// disable the button (for demo purposes only)
					this.disabled = true;
				} );
			})();
		</script>
	</body>
</html>